import {
  Image,
  Card,
  Carousel,
  Col,
  Input,
  Row,
  Space,
  Tag,
  message,
  Modal,
  Button
} from "antd";
import { SoundOutlined, RightOutlined, UpOutlined } from "@ant-design/icons";
import React from "react";
import Chart from "../../components/Chart";
// import { ReadingIncrement, WordClouds, SubjectClassification } from './echarts';
import styles from "./style.less";
import icon1 from "../../assets/images/admob.png";
import rankOne from "../../assets/images/shoucang-1.png";
import rankTwo from "../../assets/images/shoucang-2.png";
import rankThree from "../../assets/images/shoucang-3.png";
import rankFour from "../../assets/images/shoucang-4.png";
import { routerRedux } from "dva/router";
import { connect } from "dva";
import { color } from "echarts";

const imgBaseUrl = "http://21.108.153.117:8001";
const { Search, TextArea } = Input;
const tabList = ["阅读增量", "热点词云", "学科分类"];
@connect(({global})=>({userId: global.userId}))
class Home extends React.PureComponent {
  state = {
    showKnowledgesButton: true,
    showicon: true,
    specialList: [],
    tags: [],
    resourceList: [],
    hotWord: [],
    tabIndex: 0,
    rank1: [],
    rank2: [],
    rank3: [],
    rank4: [],
    document: [],
    titleList: [],
    logoList: [],
    AnnounceModel: [],
    AnnounceList: [], //公告全部数据
    AnnounceListFirst: [], //公告第一条数据
    hotWordVos: {},
    timeNumbers: {},
    typeDataNumbers: {},
    inputValue: "",
    isModalVisible: false,
    form: {},
    sourceSearchkeys: ""
  };

  componentDidMount = () => {
    console.log(this.props);
    this.getHotWord();
    this.getScientific();
    this.getScientificData();
    this.getSpecial();
    this.getHeaderInformationNum();
    this.getAnnounceList();
    this.getQueryStatistics(3);
    this.getQueryRanking(1);
    this.getQueryRanking(2);
    this.getQueryRanking(3);
    this.getQueryRanking(4);
  };
  //首页--检索热词
  getHotWord = () => {
    this.props
      .dispatch({
        type: "global/hotWord",
        payload: {}
      })
      .then(res => {
        if (res) {
          this.setState({
            hotWord: res.data
          });
        }
      });
  };
  //首页--特色资源
  getScientific = () => {
    this.props
      .dispatch({
        type: "global/scientific",
        payload: {}
      })
      .then(res => {
        if (res) {
          this.setState({
            document: res.data.scientificData[0],
            titleList: res.data.scientificTitle,
            logoList: res.data.scientificLogo
          });
        }
      });
  };
  //首页--首页--特色资源--展示部分资源、首页--资源统计-热点词云、首页--资源统计-学科分类、首页--资源统计
  getScientificData = () => {
    this.props
      .dispatch({
        type: "global/getScientificData",
        payload: {}
      })
      .then(res => {
        if (res) {
          let x = [],
            p = [],
            params2 = [],
            params3 = [];
          res.data.timeNumbers.forEach((item, index) => {
            x[index] = item.time.split(" ")[0];
            p[index] = item.number;
          });
          res.data.hotWordVos.forEach((item, index) => {
            const color = "#" + (~~(Math.random() * (1 << 24))).toString(16);
            params2[index] = {
              name: item.word,
              value: item.numbers,
              symbolSize: (Math.random() + 1) * 50,
              draggable: true,
              itemStyle: {
                normal: { shadowBlur: 10, shadowColor: color, color: color }
              }
            };
          });
          res.data.typeDataNumbers.forEach((item, index) => {
            params3[index] = { value: item.numbers, name: item.word };
          });

          this.setState({
            timeNumbers: {
              backgroundColor: "#2c343c",
              tooltip: {
                trigger: "axis",
                axisPointer: {
                  type: "shadow"
                }
              },
              legend: {
                data: ["line", "bar"],
                textStyle: {
                  color: "#ccc"
                }
              },
              xAxis: {
                data: x,
                axisLine: {
                  lineStyle: {
                    color: "#ccc"
                  }
                }
              },
              yAxis: {
                splitLine: { show: false },
                axisLine: {
                  lineStyle: {
                    color: "#ccc"
                  }
                },
                scale: true
              },

              series: [
                {
                  name: "数量",
                  type: "bar",
                  barWidth: 10,
                  itemStyle: {
                    barBorderRadius: 5,
                    color: "#43eec6"
                  },
                  data: p
                }
              ]
            },
            hotWordVos: {
              backgroundColor: "#2c343c",
              tooltip: {},
              animationDurationUpdate: function(idx) {
                // 越往后的数据延迟越大
                return idx * 100;
              },
              animationEasingUpdate: "bounceIn",
              color: ["#fff", "#fff", "#fff"],
              series: [
                {
                  type: "graph",
                  layout: "force",
                  force: {
                    repulsion: 250,
                    edgeLength: 10
                  },
                  roam: true,
                  label: {
                    normal: {
                      show: true
                    }
                  },
                  width: 1200,
                  height: 500,
                  data: params2
                }
              ]
            },
            typeDataNumbers: {
              backgroundColor: "#2c343c",
              legend: {
                top: "bottom",
                textStyle: {
                  //图例文字的样式
                  color: "#fff",
                  fontSize: 16
                }
              },
              series: [
                {
                  type: "pie",
                  radius: [80, 180],
                  center: ["50%", "45%"],
                  roseType: "area",
                  itemStyle: {
                    borderRadius: 8
                  },
                  data: params3
                }
              ]
            }
          });
        }
      });
  };
  //清空按钮
  getClear = () => {
    this.setState(
      {
        inputValue: ""
      },
      () => {
        this.advancedSearch();
      }
    );
  };

  //公告弹框
  showModal = item => {
    this.setState(
      {
        isModalVisible: true,
        AnnounceModel: item
      },
      () => {
        this.getAnnounceList();
      }
    );
  };
  //公告更多
  showMore = () => {
    if (this.state.showicon === true) {
      this.setState({
        showicon: false
      });
    } else {
      this.setState({
        showicon: true
      });
    }
  };
  //弹框确定按钮
  handleOk = () => {
    this.setState({
      isModalVisible: false
    });
  };
  //弹框取消按钮
  handleCancel = () => {
    this.setState({
      isModalVisible: false
    });
  };

  //点击特色资源跳转
  scientificToDetaile = (id, keys) => {
    this.props.dispatch(
      routerRedux.push({
        pathname: `/dataAssetsDetail/${id}`,
        state: {
          keys
        }
      })
    );
  };
  //专题跳转详情
  handleToDetaile = (id, keys) => {
    this.props.dispatch(
      routerRedux.push({
        pathname: `/specialSubjectDetail/${id}`,
        state: {
          keys
        }
      })
    );
  };

  //专题接口
  getSpecial = () => {
    this.props
      .dispatch({
        type: "global/getSpecial",
        payload: {}
      })
      .then(res => {
        if (res) {
          this.setState({
            specialList: res.data
          });
        }
      });
  };
  //累计访问人数
  getHeaderInformationNum = () => {
    this.props
      .dispatch({
        type: "global/headerInformationNum",
        payload: {}
      })
      .then(res => {});
  };
  //公告通知
  getAnnounceList = () => {
    this.props
      .dispatch({
        type: "global/getAnnounceList",
        payload: {}
      })
      .then(res => {
        if (res) {
          this.setState({
            AnnounceList: res.data,
            AnnounceListFirst: res.data.slice(0, 1)
          });
          if (res.data.length > 1) {
            this.setState({
              showKnowledgesButton: true
            });
          } else {
            this.setState({
              showKnowledgesButton: false
            });
          }
        }
      });
  };
  //资源统计
  getQueryStatistics = typeNum => {
    this.props
      .dispatch({
        type: "global/queryStatistics",
        payload: {
          type: typeNum
        }
      })
      .then(res => {});
  };
  //资源排行
  getQueryRanking = typeNum => {
    let rank = `rank${typeNum}`;
    // 资源排行--数据点击
    this.props
      .dispatch({
        type: "global/queryRanking",
        payload: {
          type: typeNum
        }
      })
      .then(res => {
        if (res && typeNum === 1) {
          this.setState({
            rank1: res.data.DataLatestReleasedRanking
          });
        } else if (res && typeNum === 2) {
          this.setState({
            rank2: res.data.DataDownloadsRanking
          });
        } else if (res && typeNum === 3) {
          this.setState({
            rank3: res.data.DataCollectionRanking
          });
        } else if (res && typeNum === 4) {
          this.setState({
            rank4: res.data.DataViewsRanking
          });
        }
      });
  };
  //数据列表
  advancedSearch = () => {
    let { pageSize, pageNum, title } = this.state;
    this.props
      .dispatch({
        type: "global/queryDataAsset",
        payload: {
          userId: this.props.userId,
          text: title,
          startTime: "",
          endTime: "",
          subjects: "",
          sources: "",
          format: "",
          scope: "",
          pageNum: pageNum,
          pageSize: pageSize,
          sort: ""
        }
      })
      .then(res => {
        if (res && res.data.rows.length > 0) {
          this.setState({
            searchList: res.data.rows[0],
            total: res.data.total
          });
        } else {
          message.error("检索关键词不存在！");
        }
      });
  };

  //检索
  onSearch = value => {
    this.props.dispatch(
      routerRedux.push({
        pathname: `/DataAssets/`,
        searchValue: value,
        state: this.state.form
      })
    );
    this.setState(
      {
        title: value
      },
      () => {
        this.advancedSearch();
      }
    );
  };

  //统计标签
  handleTabClick = e => {
    this.setState({
      tabIndex: e.target.getAttribute("data-index")
    });
  };

  //专题更多跳转
  onJump = () => {
    this.props.dispatch(
      routerRedux.push({
        pathname: `/specialSubject/`,
        state: {}
      })
    );
  };
  //特色资源跳转
  teJump = () => {
    this.props.dispatch(
      routerRedux.push({
        pathname: `/dataAssets/`,
        state: {}
      })
    );
  };
  //统计更多跳转
  statisticsJump = () => {
    this.props.dispatch(
      routerRedux.push({
        pathname: `/statistics/`,
        state: {}
      })
    );
  };
  //资源排行跳转
  handleToDetail = (id, keys) => {
    this.props.dispatch(
      routerRedux.push({
        pathname: `/dataAssetsDetail/${id}`,
        state: {
          keys
        }
      })
    );
  };
  // onTimeNumbersClick = e => {
  //   console.log("onTimeNumbersClick", e);

  // };
  //热词跳转
  onHotWordVosClick = e => {
    console.log("onHotWordVosClick", e);
    this.props.dispatch(
      routerRedux.push({
        pathname: `/dataAssets`,
        hotWord: e.name
      })
    );
  };
  //学科分类跳转
  // onDataNumbersClick = e => {
  //   console.log("onDataNumbersClick", e);
  // };
  render() {
    const {
      inputValue,
      tabIndex,
      isModalVisible,
      AnnounceModel,
      showicon,
      showKnowledgesButton
    } = this.state;
    return (
      <div className={styles.content}>
        <div className={styles.bannerBox}>
          <div className={styles.searchInBanner}>
            <div className={styles.searchBox} history={this.props.history}>
              <Search
                placeholder="请输入关键字"
                value={inputValue}
                onChange={e => this.setState({ inputValue: e.target.value })}
                onSearch={this.onSearch}
              />
              <Button onClick={this.getClear}>清空</Button>
            </div>
            <div className={styles.hotKeyWordsBox}>
              <Space align="center">
                热门检索词汇:
                {this.state.hotWord.map((item, index) => {
                  return (
                    <span
                      key={index}
                      onClick={() => this.onSearch(item)}
                      className={styles.kewWords}
                    >
                      {item}
                    </span>
                  );
                })}
              </Space>
            </div>
          </div>
        </div>
        <div className={styles.noticeBox}>
          <div className={styles.notifyBox}>
            {/* 展开收起 */}
            <div
              onClick={this.showMore}
              className={styles.announceMore}
              style={{
                display: showKnowledgesButton ? "block" : "none",
                float: "right"
              }}
            >
              <div>
                {showicon ? "更多" : "收起"}
                {showicon ? <RightOutlined /> : <UpOutlined />}
              </div>
            </div>
            {/* 第一条数据 */}
            <div className={styles.mesBox}>
              <ul style={{ display: showicon ? "block" : "none" }}>
                {this.state.AnnounceListFirst.map((item, index) => {
                  return (
                    <li key={index}>
                      <SoundOutlined />
                      &nbsp;&nbsp;
                      <span onClick={() => this.showModal(item)}>
                        {item.title}
                      </span>
                      <span style={{ float: "right" }}>
                        {item.sendTime}&nbsp;&nbsp;
                      </span>
                    </li>
                  );
                })}
              </ul>
            </div>
            {/* 全部数据 */}
            <div className={styles.mesBox}>
              <ul style={{ display: showicon ? "none" : "block" }}>
                {this.state.AnnounceList.map((item, index) => {
                  return (
                    <li key={index}>
                      <SoundOutlined />
                      &nbsp;&nbsp;
                      <span onClick={() => this.showModal(item)}>
                        {item.title}
                      </span>
                      <span style={{ float: "right" }}>
                        {item.sendTime}&nbsp;&nbsp;
                      </span>
                    </li>
                  );
                })}
              </ul>
            </div>
          </div>
        </div>
        <div className={styles.resourcesBox}>
          <div className={styles.titleBox}>
            <div className={styles.cleafix}>
              <div className={styles.fl}>
                <span className={styles.title}>特色资源</span>
                <span className={styles.subTitle}>
                  Characteristic resources
                </span>
              </div>
              <div className={styles.fr}>
                <span className={styles.more} onClick={this.teJump}>
                  更多&gt;&gt;
                </span>
              </div>
            </div>
          </div>
          <div className={styles.cardBox}>
            <Row gutter={[20, 20]}>
              <Col span={6}>
                <Card>
                  <div className={styles.numBox}>
                    <p>
                      <span>{this.state.document.dataNumbers}</span>
                    </p>
                    <p>科研数据数量</p>
                  </div>
                </Card>
              </Col>
              <Col span={6}>
                <Card>
                  <div className={styles.numBox}>
                    <p>
                      <span>{this.state.document.visitNumbers}</span>
                    </p>
                    <p>科研数据访问量</p>
                  </div>
                </Card>
              </Col>
              <Col span={6}>
                <Card>
                  <div className={styles.numBox}>
                    <p>
                      <span>{this.state.document.sizeNumbers}</span>
                    </p>
                    <p>科研数据容量</p>
                  </div>
                </Card>
              </Col>
              <Col span={6}>
                <Card>
                  <div className={styles.numBox}>
                    <p>
                      <span>{this.state.document.usedNumbers}</span>
                    </p>
                    <p>科研数据使用量</p>
                  </div>
                </Card>
              </Col>
              <Col span={12}>
                <Carousel autoplay>
                  {this.state.logoList.length > 0
                    ? this.state.logoList.map((item, index) => {
                        return (
                          <Card
                            key={index}
                            onClick={() => this.handleToDetail(item.id)}
                          >
                            <Image
                              height={"100%"}
                              width={"100%"}
                              src={item.logo}
                            />
                          </Card>
                        );
                      })
                    : null}
                </Carousel>
              </Col>
              <Col span={12}>
                <Row gutter={[20, 20]}>
                  {this.state.titleList.length > 0
                    ? this.state.titleList.map((item, index) => {
                        return (
                          <Col
                            key={index}
                            onClick={() => this.handleToDetail(item.id)}
                            span={12}
                          >
                            <Card>{item.title}</Card>
                          </Col>
                        );
                      })
                    : null}
                </Row>
              </Col>
            </Row>
          </div>
        </div>
        <div className={styles.statisticsBox}>
          <div className={styles.titleBox}>
            <div className={styles.cleafix}>
              <div className={styles.fl}>
                <span className={styles.title}>资源统计</span>
                <span className={styles.subTitle}>Resource statistics</span>
              </div>
              <div className={styles.fr}>
                <span className={styles.more} onClick={this.statisticsJump}>
                  更多&gt;&gt;
                </span>
              </div>
            </div>
          </div>
          <div className={styles.chartBox}>
            {Number(tabIndex) === 0 ? (
              <Chart
                option={this.state.timeNumbers}
                onChartClick={this.onTimeNumbersClick}
              />
            ) : Number(tabIndex) === 1 ? (
              <Chart
                option={this.state.hotWordVos}
                onChartClick={this.onHotWordVosClick}
              />
            ) : (
              <Chart
                option={this.state.typeDataNumbers}
                onChartClick={this.onDataNumbersClick}
              />
            )}
          </div>
          <div className={styles.tabBox}>
            <ul className={styles.cleafix}>
              {tabList.map((item, index) => {
                return (
                  <li
                    className={
                      Number(tabIndex) === index
                        ? `${styles.fl} ${styles.active}`
                        : `${styles.fl}`
                    }
                    key={index}
                    data-index={index}
                    onClick={e => this.handleTabClick(e)}
                  >
                    {item}
                  </li>
                );
              })}
            </ul>
          </div>
        </div>
        <div className={styles.rankListBox}>
          <div className={styles.titleBox}>
            <div className={styles.cleafix}>
              <div className={styles.fl}>
                <span className={styles.title}>科研数据排行</span>
                <span className={styles.subTitle}>Resource ranking</span>
              </div>
              <div className={styles.fr}>
                {/* <span className={styles.more}>更多&gt;&gt;</span> */}
              </div>
            </div>
          </div>
          <div className={styles.rankList}>
            <Row gutter={24}>
              <Col span={6}>
                <div className={styles.rankBox}>
                  <div className={styles.rankTitle}>最新发布数据</div>
                  <div className={styles.rankDetail}>
                    <ul>
                      {this.state.rank1 &&
                        this.state.rank1.map((item, index) => {
                          return (
                            <li key={index}>
                              {item.title ? (
                                <img
                                  src={
                                    index === 0
                                      ? rankOne
                                      : index === 1
                                      ? rankTwo
                                      : index === 2
                                      ? rankThree
                                      : rankFour
                                  }
                                  alt=""
                                />
                              ) : null}
                              <span
                                title={item.title}
                                onClick={() => this.handleToDetail(item.id)}
                              >
                                {item.title}
                              </span>
                            </li>
                          );
                        })}
                    </ul>
                  </div>
                </div>
              </Col>
              <Col span={6}>
                <div className={styles.rankBox}>
                  <div className={styles.rankTitle}>数据下载排行榜</div>
                  <div className={styles.rankDetail}>
                    <ul>
                      {this.state.rank2 &&
                        this.state.rank2.map((item, index) => {
                          return (
                            <li key={index}>
                              {item.title ? (
                                <img
                                  src={
                                    index === 0
                                      ? rankOne
                                      : index === 1
                                      ? rankTwo
                                      : index === 2
                                      ? rankThree
                                      : rankFour
                                  }
                                  alt=""
                                />
                              ) : null}
                              <span
                                title={item.title}
                                onClick={() => this.handleToDetail(item.id)}
                              >
                                {item.title}
                              </span>
                            </li>
                          );
                        })}
                    </ul>
                  </div>
                </div>
              </Col>
              <Col span={6}>
                <div className={styles.rankBox}>
                  <div className={styles.rankTitle}>数据收藏排行榜</div>
                  <div className={styles.rankDetail}>
                    <ul>
                      {this.state.rank3 &&
                        this.state.rank3.map((item, index) => {
                          return (
                            <li key={index}>
                              {item.title ? (
                                <img
                                  src={
                                    index === 0
                                      ? rankOne
                                      : index === 1
                                      ? rankTwo
                                      : index === 2
                                      ? rankThree
                                      : rankFour
                                  }
                                  alt=""
                                />
                              ) : null}
                              <span
                                title={item.title}
                                onClick={() => this.handleToDetail(item.id)}
                              >
                                {item.title}
                              </span>
                            </li>
                          );
                        })}
                    </ul>
                  </div>
                </div>
              </Col>
              <Col span={6}>
                <div className={styles.rankBox}>
                  <div className={styles.rankTitle}>数据点击排行榜</div>
                  <div className={styles.rankDetail}>
                    <ul>
                      {this.state.rank4 &&
                        this.state.rank4.map((item, index) => {
                          return (
                            <li key={index}>
                              {item.title ? (
                                <img
                                  src={
                                    index === 0
                                      ? rankOne
                                      : index === 1
                                      ? rankTwo
                                      : index === 2
                                      ? rankThree
                                      : rankFour
                                  }
                                  alt=""
                                />
                              ) : null}
                              <span
                                title={item.title}
                                onClick={() => this.handleToDetail(item.id)}
                              >
                                {item.title}
                              </span>
                            </li>
                          );
                        })}
                    </ul>
                  </div>
                </div>
              </Col>
            </Row>
          </div>
        </div>
        <div className={styles.specialBox}>
          <div className={styles.titleBox}>
            <div className={styles.cleafix}>
              <div className={styles.fl}>
                <span className={styles.title}>专题</span>
                <span className={styles.subTitle}>Special subject</span>
              </div>
              <div className={styles.fr}>
                <span className={styles.more} onClick={this.onJump}>
                  更多&gt;&gt;
                </span>
              </div>
            </div>
          </div>
          <div className={styles.special}>
            <Row gutter={[20, 40]}>
              {this.state.specialList.map((item, index) => {
                return (
                  <Col span={12} key={index}>
                    <Card
                      className={styles.specialCard}
                      onClick={() => this.handleToDetaile(item.id)}
                    >
                      <div
                        className={`${styles.cleafix} ${styles.specialHead}`}
                      >
                        <div className={`${styles.fl} ${styles.iconBox}`}>
                          <div className={styles.descriptionsIcon}>
                            {item.logo ? (
                              <img src={item.logo} alt="" />
                            ) : (
                              <div>{item.name.charAt(0)}</div>
                            )}
                          </div>
                          {/* <img src={icon1} alt="" /> */}
                        </div>
                        <div className={styles.fl}>
                          <p>{item.name}</p>
                          {
                            <div className={styles.tags}>
                              {<Tag key={index}>{item.tags}</Tag>}
                            </div>
                          }
                        </div>
                      </div>
                      <div className={styles.abstract}>
                        <p
                          style={{
                            fontSize: "14px",
                            marginTop: "10px",
                            textIndent: "2em",
                            overflow: "hidden",
                            textOverflow: "ellipsis",
                            display: "-webkit-box",
                            WebkitBoxOrient: "vertical",
                            WebkitLineClamp: 4
                          }}
                        >
                          {item.introduction}
                        </p>
                      </div>
                    </Card>
                  </Col>
                );
              })}
            </Row>
          </div>
        </div>
        {/* 点击公告弹窗 */}
        <Modal
          title="公告详情"
          visible={isModalVisible}
          footer={null}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <div className={styles.modelTitle}>{AnnounceModel.title}</div>
          <div className={styles.modelSendTime}>{AnnounceModel.sendTime}</div>
          <div className={styles.modelContent}>{AnnounceModel.content}</div>
        </Modal>
        )
      </div>
    );
  }
}

export default Home;
